<template>
  <div class="song-detail">
    <detail-header :song-detail-data="detailSongList" @loadmusic="loadMusic" />
    <detail-table :music-list="musicList" />
  </div>
</template>

<script>
import DetailHeader from './DetailHeader'
import DetailTable from './DetailTable'

import { getSongDetailList } from '@/api/songrc.js'
import { getSongDetailById } from '@/api/Personal'

export default {
  name: 'SongDetail',
  created() {
    this.getSongDetail()
  },
  data() {
    return {
      // 储存头部数据
      detailSongList: {},
      // 存放歌曲
      musicList: []
    }
  },
  mounted() {
    this.$bus.$on('itemClick', val => {
      this.getSongDetail(val)
    })
  },
  methods: {
    async getSongDetail(id) {
      const songId = window.sessionStorage.getItem('id')
      const { data: res } = await getSongDetailList(songId || id)
      this.detailSongList = res.playlist
      let arr = []
      res.playlist.trackIds.forEach(item => {
        arr.push(item.id)
      })
      const { data: list } = await getSongDetailById(arr)
      this.musicList = list.songs
    },
    loadMusic() {
      this.musicList.forEach(item => {
        this.playMusic(item)
      })
    }
  },
  components: {
    DetailHeader,
    DetailTable
  }
}
</script>

<style>
</style>